// 导入 react 基础库，核心模块，在不使用 h1 的时候为非高亮状态
import React from "react";
// ReactDOM 关于 react 中 dom 处理用的
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById('root'))

// const app = <h1>hello React</h1>
// 函数式组件
// const app = function () {
//   return <h1>hello React 下课休息</h1>
// }

// 函数式组件
// 组件的名称首字母必须大写
// html 共有 107 个标签，如果不在这 107 个内，但是写的是小写，要先对比 107 次
// 如果首字母是大写，那么就直接被当做自定义组件
const App = function () {
  // 函数的目的让组件有自己独立的作用域
  // return 后面的代码就是组件的模板
  // 如果组件模板过于复杂,建议添加一个 ()
  // 在 react 中空标签就是你所理解的  <></>
  // console.log('1111111111111');
  return (<>
    <h1>hello React 下课休息</h1>
    <h2>在上班和上进之间，有人会选择上香。</h2>
  </>)
}

// 调用 app 的时候返回的是 jsx 代码，我们会将 h1 显示在页面中
// root.render(app())

root.render(
  // <App></App>
  // StrictMode 该组件是用来定义严格模式的，会在控制台中出现一些使用不规范的提示
  // <React.StrictMode>
  // 使用组件和 vue 是一致的，可以使用单标签也可以双标签
  <App />
  // </React.StrictMode>
)

/*
1. 组件是一个函数
2. 组件名称首字母要大写
3. 函数内部要 return 出一个模板
*/
